<!DOCTYPE html>
<!--发行版本,有特定加速-->
<html>
<head>
	<title>卡坦岛web版</title>
	{% load static %}
	{% csrf_token %}
	<link rel="stylesheet" type="text/css" href="http://cdn.newcenturyfans.cn/css/game_test.css">
	<script type="text/javascript" src="http://cdn.repository.webfont.com/wwwroot/js/wf/youziku.api.min.js"></script>
	<script type="text/javascript">
	   //动态字库api
	   $webfont.load("head_text,pre-load-text,wait_info,button,player,#rounds", "e316d772ba7d483780f759e6b4364146", "hdjxyt");
	   $webfont.draw();
	</script>
	<script type="text/javascript" src="http://cdn.newcenturyfans.cn/js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript" src="http://cdn.newcenturyfans.cn/js/jquery.cookie.js"></script>
	<link href="http://cdn.newcenturyfans.cn/css/bootstrap.min.css" rel="stylesheet">

	<script src="http://cdn.newcenturyfans.cn/js/total_packed.js"></script>
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Cache-Control" content="no-cache">
	<meta http-equiv="Expires" content="0">	 
</head>
<body style="background: none;">
	<!--<span id="load_game" style="cursor:pointer;display: inline;z-index:100;">(离线)生成随机地图</span>-->
	<!--初始界面-->
	<span id="basic_cmd" style="position:absolute; left:20%"> 
		<div id="start_menu" class="dynamic_window">
			<div class="window_head">
				<span class="head_item">创建房间</span><span class="head_item">加入房间</span>
			</div>
			<div id="window_linker"></div>
			<div class="window_body">
				<div class="content_fix_page">
					<label>
						房间密码：<input AUTOCOMPLETE="OFF" id="room_pswd" type="text" style="width:180px" placeholder="由英文和数字构成">
						<br><span id="room_checking_state"></span>
					</label>
				</div>
				<div class="content_page">
					<label>
						游戏人数：<input id="room_size" type="number" min="2" max="6" style="width:180px" placeholder="2~6的数字">
					</label>
					<label>
						回合时间：<input id="room_time_per_turn" type="text" style="width:180px" value="0" placeholder="设为0不启用">
					</label>
					<label>
						地图模版：<select id="map_template" name="map_template">
						<option value="default">默认</option>
						<option value="fruitful">富饶</option>
						<option value="mountains">山脉</option>
						<option value="poor">贫瘠</option>
					</select>
					</label>	
					<button type="button" id="create_game_online" class="list-group-item-success">创建房间</button>		
				</div>
				<div class="content_page">
					<label>选择角色：
						<span id="set_user_index">
							<label><input id="type_create_room" name="user_index" type="radio" value="0">0</label>
						</span>
					</label>
					<label>
						玩家昵称：<input id="set_user_name" type="text" style="width:120px" placeholder="可使用中文">
						<label><input type="checkbox" name="remember_user_name">记住昵称</label>
					</label>
						<button type="button" id="load_game_online" class="list-group-item-success">加入房间</button>
				</div>
			</div>
		</div>
		<span style="display:none;">随机数种：<span id="seed_id"></span><span id="debuging"> debug</span></span>
	</span>
	<div></div>
	<!--地图模块-->
	<map ondragstart="return false;" onselectstart="return false;" unselectable="on">
		<!--六边形层-->
		<div id="places">
		</div>
		<!--边层-->
		<div id="edges">
		</div>
		<!--海港层-->
		<div id="harbors">
		</div>
		<!--点层-->
		<div id="points">
		</div>
		<!--城市层-->
		<div id="cities">
		</div>
		<!--道路层-->
		<div id="roads">
		</div>
		<!--强盗-->
		<robber></robber>
	</map>
	<!--非地图UI模块-->
	<!--等待界面-->
	<wait_window style="display:none;">
		<wait_info_back><wait_info>等待消息中···</wait_info></wait_info_back>	
	</wait_window>
	<!--确认窗口-->
	<confirm_window>
		<confirm_back></confirm_back>
		<confirm_content class="flex_window" flex_min_width="200" flex_min_height="150">
			<window_head>
				<head_text>提示</head_text>			
				<button id="resize" class="coor">o</button>
				<button id="close">x</button>
			</window_head>
			<confirm_body>
				<alert_text>测试文字。</alert_text>
			</confirm_body>	
			<confirm_action>
				<button class="btn-success" id="confirm_action">确认</button>&nbsp;&nbsp;&nbsp;&nbsp;<button class="btn-danger" id="cancel_action">取消</button>
			</confirm_action>
		</confirm_content>
	</confirm_window>
	<!--资源栏(暂定为静态资源,而非动态加载)-->
	<source_list>
		<img src="/media/img/icon_1.png" width="25px"><span class="src_brick"><truely_own>0</truely_own><pre_pay></pre_pay></span>
		<img src="/media/img/icon_2.png" width="25px"><span class="src_wood"><truely_own>0</truely_own><pre_pay></pre_pay></span>
		<img src="/media/img/icon_3.png" width="25px"><span class="src_wool"><truely_own>0</truely_own><pre_pay></pre_pay></span>
		<img src="/media/img/icon_4.png" width="25px"><span class="src_grain"><truely_own>0</truely_own><pre_pay></pre_pay></span>
		<img src="/media/img/icon_5.png" width="25px"><span class="src_ore"><truely_own>0</truely_own><pre_pay></pre_pay></span>
	</source_list>
	<!--骰子-->
	<dice dice_id="0" style="left:10px;"><span id="debug_show_selectors" on="off">打开选择器</span><span id="debug_show_ids" on="off">显示元素id</span></dice>
	<dice dice_id="1" style="left:63px;"><div id="plc_info"></div></dice>
	<!--0级菜单：投掷、建设、交易、发展-->
	<actions0>		
		<div class="fst_action list-group">
			<button type="button" id="action_dice" class="list-group-item">投掷</button>
		</div>
		<br>
		<div class="list-group">
		<button type="button" id="action_contribute" class="list-group-item" help="消耗你的资源来进行建设或其他行为,每个选项右侧是需要消耗的资源量。">建设</button>
		<button type="button" id="action_trade" class="list-group-item" help="与银行、港口或是玩家交易,交易界面会提示资源的换取比例。">交易</button>
		<button type="button" id="action_develop" class="list-group-item" help="使用发展卡来改变你的局势,一回合只能使用一张发展卡。">发展</button>
	  	</div>
	  	<br>
	  	<div class="list-group">
	  		<button type="button" id="action_end_turn" class="list-group-item-success">结束回合</button>
	  	</div>
	  	<!--1级菜单-->
	  	<actions1 class="list-group">
	  		<button type="button" id="action_build_road" class="list-group-item" help="建设一条道路,必须沿着你的道路、定居点或城市修建。">建设道路<cost class="brick">1</cost><cost class="wood">1</cost></button>
	  		<button type="button" id="action_build_city0" class="list-group-item" help="建设一个新的定居点,需要有你的道路相连,且附近没有任何人的定居点。骰子的总值与该定居点附近地块上的数字相同时,可以收获该地块类型产出的资源一份。">建立定居点<cost class="brick">1</cost><cost class="wood">1</cost><cost class="wool">1</cost><cost class="grain">1</cost></button>
	  		<button type="button" id="action_build_city1" class="list-group-item" help="将定居点升级为城市,每次收获资源时,城市可以获得双倍的资源。">建设新城市<cost class="grain">2</cost><cost class="ore">3</cost></button>
	  		<button type="button" id="action_buy_dev_card" class="list-group-item" help="抽一张发展卡,之后可以使用发展卡来帮助你赢得胜利。抽到的发展卡不能立刻使用(除分数卡)。">抽取发展卡<cost class="wool">1</cost><cost class="grain">1</cost><cost class="ore">1</cost></button>

	  		<button trade_target="bank" type="button" id="action_trade_with_bank" class="action_prepare_trade list-group-item" help="银行可以给你任何想要的资源,但你需要4份相同资源才能换取一份想要的资源。">与银行交易</button>
	  		<button type="button" id="action_trade_with_harbours" class="list-group-item" help="当自己的城市坐落于港口,可以以更优惠的价格换取资源。">与港口交易</button>
	  		<button type="button" id="action_trade_with_players" class="list-group-item" help="向在场的玩家提出你的交易,没有任何限制。">与玩家交易</button>

	  		<button type="button" id="action_use_dev_soldier" class="list-group-item" help="移动强盗,之后可以掠夺强盗附近城市所有者的资源卡。">士兵<span class="dev_num"></span></button>
	  		<button type="button" id="action_use_dev_plenty" class="list-group-item" help="立刻获得两份资源,类型不限。">丰收之年<span class="dev_num"></span></button>
	  		<button type="button" id="action_use_dev_monopoly" class="list-group-item" help="从其他玩家手上拿走所有你指定的资源,但使用后本回合不能进行修建。">垄断<span class="dev_num"></span></button>
	  		<button type="button" id="action_use_dev_road_making" class="list-group-item" help="立刻无消耗修建两条道路,只要满足修建的基本规则即可。">道路建设<span class="dev_num"></span></button>
	  		<button type="button" id="action_show_score_cards" class="list-group-item" help="展示自己还未展示的分数卡,即使不展示,依然会算入总分,最后胜利时统一展示。">展示分数卡</button>
	  		<!--2级菜单-->
	  		<actions2 class="list-group">
	  		</actions2>
	  	</actions1>
  	</actions0>
  	<!--特殊选项-->
  	<special_actions class="list-group">
		<button type="button" id="cancel_robbing" class="list-group-item">不掠夺</button>
		<button type="button" id="to_before_action" class="list-group-item">重新选择</button>
  	</special_actions>
  	<!--历史窗口-->
  	<his_window style="display: none;"> 
  		<his_title>历史记录</his_title><label id="hide_audience_mes" onselectstart="return false;" unselectable="on"><input type="checkbox"><span>屏蔽观众</span></label><img src="/media/img/latest_button.png" id="his_latest_button">
  		<his_text_window>
	  		<his_text>
	  		</his_text>
  		</his_text_window>
  		<his_input_window>
  			<input id="talk_msg_input_window" AUTOCOMPLETE="OFF" type="text" placeholder="按回车快速发送" οnkeydοwn="his_window_send_msg()">
			<button id="talk_msg_input_window_send">发送</button>
  		</his_input_window>
  	</his_window>
	<!--顺序列表-->
	<step_list>
		<!--计时器-->
		<timer-container style="display: none;">
	        <timer class="left"><content></content></timer>
	        <timer class="right"><content></content></timer>
	    </timer-container>  
	</step_list>
	<!--回合数-->
	<rounds><img class="rounds" src="/media/img/rounds.png"/><div id="rounds"></div></rounds>
	<!--玩家状态栏，附加文字不可选中，图片不可拖动功能-->
	<div id="players" ondragstart="return false;" onselectstart="return false;" unselectable="on" style="-moz-user-select:none;display:none;">
	</div>
	<!--信息窗口-->
	<info_window style="display: none;"><help_text></help_text><alert_text></alert_text></info_window>
	
	<!--资源选择窗口(丢弃资源/丰收资源)-->
	<simple_item_select_window class="flex_window" flex_min_width="160" flex_min_height="500">
		<!--遮挡用背景-->
		<window_back></window_back>
		<!--标题栏-->
		<window_head>
			<head_text></head_text>
			<button id="resize" class="coor">o</button>
			<button id="close">x</button>
		</window_head>
		<!--资源选框1-->
		<src_select_window>
			<head_text><content></content><span id="item_count"></span>/<span id="item_top_limit"></span></head_text>
			<srcs_selected></srcs_selected>
			<srcs_available></srcs_available>
		</src_select_window>
		<src_confirm_window><button class="btn-success" id="action_confirm_selected_items"></button></src_confirm_window>
	</simple_item_select_window>
	<!--交易窗口-->
	<trade_window>
		<!--遮挡用背景-->
		<window_back></window_back>
		<window_content class="flex_window" flex_min_width="200" flex_min_height="300">
			<!--标题栏-->
			<window_head>
				<head_text></head_text>			
				<button id="resize" class="coor">o</button>
				<button id="close">x</button>
			</window_head>
			<!--资源选框1-->
			<src_select_window class="give">
				<head_text><person></person>想给予：</head_text>
				<srcs_selected></srcs_selected>
				<srcs_available></srcs_available>
			</src_select_window>
			<!--资源选框2-->
			<src_select_window class="get">
				<head_text><person></person>想获得：</head_text>
				<srcs_selected></srcs_selected>
				<srcs_available></srcs_available>
			</src_select_window>
			<src_confirm_window>
				<trade_state></trade_state>
				<src_confirm_actions>
					<button class="btn-success" id="action_trade_items"></button>
					<button class="btn-danger" id="action_refuse_trade_items">拒绝交易</button>
				</src_confirm_actions>		
			</src_confirm_window>
		</window_content>
	</trade_window>
	<!--回放控制器-->
	<replay_controller style="display: none;">
		<timer_updater class="active"></timer_updater>
		<auto_play_speed>
			<set_speed fq="3">1x</set_speed>
			<set_speed fq="2">2x</set_speed>
			<set_speed fq="1">3x</set_speed>
		</auto_play_speed>
		<action_play class="pause"></action_play>
		<action_step_next></action_step_next>
	</replay_controller>
	<!--部分文字预加载-->
	<pre-load-text style="z-index:-1;display: none;">可收获 需要舍弃的资源 他 你 发起交易 关闭窗口 拒绝 接受 放弃</pre-load-text>
</body>
</html>